<template>
    <div class="left-side">
        <div class="admin-info">
            <div class="admin-avatar"></div>
            <p class="admin-name"><span class="name">管理员</span><el-tag class="tag" type="primary">系统管理员</el-tag></p>
            <button class="admin-set">个人设置</button>
            <div class="signout-btn" @click="signout">退出登录</div>
        </div>
        <el-menu
            theme="dark"
            router
            :default-active="activePath"
            class="el-menu-vertical-demo" 
            @open="handleOpen" 
            @close="handleClose">
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-s-shop"></i>
                    <span>供应商管理</span>
                </template>
                <el-menu-item index="/supplier">供应商列表</el-menu-item>
                <el-menu-item index="/supplier/import-export">导入导出</el-menu-item>
            </el-submenu>
            
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-goods"></i>
                    <span>产品管理</span>
                </template>
                <el-menu-item index="/product">产品列表</el-menu-item>
            </el-submenu>
            
            <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-s-order"></i>
                    <span>溯源管理</span>
                </template>
                <el-menu-item index="/trace">批次管理</el-menu-item>
                <el-menu-item index="/trace/warehouse">仓库质检</el-menu-item>
                <el-menu-item index="/trace/logistics">物流管理</el-menu-item>
            </el-submenu>
            
            <el-submenu index="4">
                <template slot="title">
                    <i class="el-icon-connection"></i>
                    <span>区块链管理</span>
                </template>
                <el-menu-item index="/blockchain">数据存证</el-menu-item>
                <el-menu-item index="/blockchain/verify">数据验证</el-menu-item>
            </el-submenu>
            
            <el-submenu index="5">
                <template slot="title">
                    <i class="el-icon-warning"></i>
                    <span>预警管理</span>
                </template>
                <el-menu-item index="/warning">预警规则</el-menu-item>
                <el-menu-item index="/warning/history">预警历史</el-menu-item>
            </el-submenu>
            
            <el-submenu index="6">
                <template slot="title">
                    <i class="el-icon-data-analysis"></i>
                    <span>数据分析</span>
                </template>
                <el-menu-item index="/visualization">数据可视化</el-menu-item>
                <el-menu-item index="/visualization/report">统计报表</el-menu-item>
            </el-submenu>
            
            <el-menu-item index="/qrcode">
                <i class="el-icon-printer"></i>
                <span>二维码打印</span>
            </el-menu-item>
            
            <el-menu-item index="/interaction">
                <i class="el-icon-message"></i>
                <span>消息通知</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        data() {
            return {
                // 移除activePath
            }
        },
        
        computed: {
            activePath: function () {
                return this.$route.path;
            }
        },
        
        methods: {
            signout() {
                axios.get('/api/login_out').then(function(response) {
                    this.$message({
                        message: response.data.info,
                        type: 'success'
                    });
                    this.$router.push('/login');
                }.bind(this));
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style scoped="scoped">
    .left-side {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 240px;
        background-color: #324157;
        z-index: 100;
        overflow: auto;
    }
    
    .admin-info {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 180px;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
    }
    
    .admin-avatar {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        background-image: url(~@/assets/avatar-default.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        overflow: hidden;
    }
    
    .admin-name {
        margin-top: 10px;
        font-size: 14px;
        color: #fff;
    }
    
    .admin-name span.name {
        opacity: 0.8;
    }
    
    .admin-name span.tag {
        margin-left: 5px;
        height: 20px;
        font-size: 10px;
        line-height: 18px;
        color: rgba(32,160,255,.5);
    }
    
    .admin-set {
        height: 30px;
        padding: 0 15px;
        margin-top: 15px;
        font-size: 12px;
        line-height: 26px;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 15px;
        background: none;
        opacity: 0.6;
        cursor: pointer;
    }
    
    .admin-set:hover {
        opacity: 1;
    }
    
    .signout-btn {
        position: absolute;
        top: 10px;
        left: 5px;
        height: 20px;
        line-height: 18px;
        font-size: 12px;
        color: rgba(255,255,255,.5);
        cursor: pointer;
    }
    
    .signout-btn:hover {
        color: #fff;
    }
    
    .el-menu {
        border-right: none;
    }
    
    .el-menu-item, .el-submenu__title {
        height: 50px;
        line-height: 50px;
    }
    
    .el-menu-item i, .el-submenu__title i {
        margin-right: 10px;
    }

    /* Add this rule to center only sub-menu items */
    .el-submenu .el-menu-item {
        text-align: center;
    }
</style>